<template>
  <div class="p-8 max-w-7xl mx-auto">
    <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-12 text-center">
      Vue3 横向滚动组件库
    </h1>

    <!-- 基础横向滚动容器 -->
    <section class="mb-20">
      <h2 class="text-[clamp(1.3rem,2vw,1.8rem)] font-bold text-gray-700 mb-6">基础横向滚动容器</h2>
      <p class="text-gray-600 mb-6 max-w-2xl">
        这是一个简单的横向滚动容器，用户可以通过鼠标拖动来浏览内容。
      </p>
      <BaseScrollContainer>
        <template #content>
          <div class="flex space-x-4">
            <div
              class="w-64 h-40 bg-blue-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 1
            </div>
            <div
              class="w-64 h-40 bg-green-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 2
            </div>
            <div
              class="w-64 h-40 bg-yellow-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 3
            </div>
            <div
              class="w-64 h-40 bg-purple-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 4
            </div>
            <div
              class="w-64 h-40 bg-red-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 5
            </div>
            <div
              class="w-64 h-40 bg-teal-500 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 6
            </div>
          </div>
        </template>
      </BaseScrollContainer>
    </section>

    <!-- 带导航按钮的横向滚动组件 -->
    <section class="mb-20">
      <h2 class="text-[clamp(1.3rem,2vw,1.8rem)] font-bold text-gray-700 mb-6">
        带导航按钮的横向滚动
      </h2>
      <p class="text-gray-600 mb-6 max-w-2xl">
        这个组件在基础滚动容器上添加了导航按钮，方便用户快速浏览内容。
      </p>
      <ScrollWithButtons :scrollAmount="200">
        <template #content>
          <div class="flex space-x-4">
            <div
              class="w-64 h-40 bg-blue-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 1
            </div>
            <div
              class="w-64 h-40 bg-green-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 2
            </div>
            <div
              class="w-64 h-40 bg-yellow-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 3
            </div>
            <div
              class="w-64 h-40 bg-purple-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 4
            </div>
            <div
              class="w-64 h-40 bg-red-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 5
            </div>
            <div
              class="w-64 h-40 bg-teal-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 6
            </div>
            <div
              class="w-64 h-40 bg-indigo-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 7
            </div>
            <div
              class="w-64 h-40 bg-pink-400 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 8
            </div>
          </div>
        </template>
      </ScrollWithButtons>
    </section>

    <!-- 自动播放的横向滚动组件 -->
    <section class="mb-20">
      <h2 class="text-[clamp(1.3rem,2vw,1.8rem)] font-bold text-gray-700 mb-6">
        自动播放的横向滚动
      </h2>
      <p class="text-gray-600 mb-6 max-w-2xl">
        这个组件会自动滚动展示内容，用户可以暂停或继续自动播放。
      </p>
      <AutoScroll :scrollSpeed="3" :pauseOnHover="true">
        <template #content>
          <div class="flex space-x-4">
            <div
              class="w-64 h-40 bg-blue-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 1
            </div>
            <div
              class="w-64 h-40 bg-green-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 2
            </div>
            <div
              class="w-64 h-40 bg-yellow-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 3
            </div>
            <div
              class="w-64 h-40 bg-purple-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 4
            </div>
            <div
              class="w-64 h-40 bg-red-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 5
            </div>
            <div
              class="w-64 h-40 bg-teal-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 6
            </div>
            <div
              class="w-64 h-40 bg-indigo-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 7
            </div>
            <div
              class="w-64 h-40 bg-pink-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 8
            </div>
            <div
              class="w-64 h-40 bg-amber-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 9
            </div>
            <div
              class="w-64 h-40 bg-emerald-300 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 10
            </div>
          </div>
        </template>
      </AutoScroll>
    </section>

    <!-- 可分页的横向滚动组件 -->
    <section class="mb-20">
      <h2 class="text-[clamp(1.3rem,2vw,1.8rem)] font-bold text-gray-700 mb-6">可分页的横向滚动</h2>
      <p class="text-gray-600 mb-6 max-w-2xl">
        这个组件将内容分成多个页面，用户可以通过分页指示器快速切换页面。
      </p>
      <ScrollWithPagination :itemsPerPage="4">
        <template #content>
          <div class="flex space-x-4">
            <div
              class="w-64 h-40 bg-blue-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 1
            </div>
            <div
              class="w-64 h-40 bg-green-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 2
            </div>
            <div
              class="w-64 h-40 bg-yellow-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 3
            </div>
            <div
              class="w-64 h-40 bg-purple-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 4
            </div>
            <div
              class="w-64 h-40 bg-red-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 5
            </div>
            <div
              class="w-64 h-40 bg-teal-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 6
            </div>
            <div
              class="w-64 h-40 bg-indigo-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 7
            </div>
            <div
              class="w-64 h-40 bg-pink-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 8
            </div>
            <div
              class="w-64 h-40 bg-amber-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 9
            </div>
            <div
              class="w-64 h-40 bg-emerald-600 rounded-lg shadow-lg flex items-center justify-center text-white font-bold"
            >
              项目 10
            </div>
          </div>
        </template>
      </ScrollWithPagination>
    </section>

    <!-- 使用自定义内容的示例 -->
    <section class="mb-20">
      <h2 class="text-[clamp(1.3rem,2vw,1.8rem)] font-bold text-gray-700 mb-6">自定义内容示例</h2>
      <p class="text-gray-600 mb-6 max-w-2xl">
        你可以在这些组件中使用任何自定义内容，例如产品卡片、图片画廊等。
      </p>
      <ScrollWithButtons :scrollAmount="300">
        <template #content>
          <div class="flex space-x-6">
            <div
              class="w-64 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <img
                src="https://picsum.photos/seed/prod1/300/200"
                alt="产品图片"
                class="w-full h-40 object-cover"
              />
              <div class="p-4">
                <h3 class="font-bold text-gray-800 mb-2">产品 1</h3>
                <p class="text-gray-600 text-sm mb-3">
                  这是一个示例产品，展示了如何在滚动组件中使用自定义内容。
                </p>
                <button
                  class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition-colors duration-300"
                >
                  查看详情
                </button>
              </div>
            </div>

            <div
              class="w-64 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <img
                src="https://picsum.photos/seed/prod2/300/200"
                alt="产品图片"
                class="w-full h-40 object-cover"
              />
              <div class="p-4">
                <h3 class="font-bold text-gray-800 mb-2">产品 2</h3>
                <p class="text-gray-600 text-sm mb-3">
                  这是一个示例产品，展示了如何在滚动组件中使用自定义内容。
                </p>
                <button
                  class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition-colors duration-300"
                >
                  查看详情
                </button>
              </div>
            </div>

            <div
              class="w-64 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <img
                src="https://picsum.photos/seed/prod3/300/200"
                alt="产品图片"
                class="w-full h-40 object-cover"
              />
              <div class="p-4">
                <h3 class="font-bold text-gray-800 mb-2">产品 3</h3>
                <p class="text-gray-600 text-sm mb-3">
                  这是一个示例产品，展示了如何在滚动组件中使用自定义内容。
                </p>
                <button
                  class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition-colors duration-300"
                >
                  查看详情
                </button>
              </div>
            </div>

            <div
              class="w-64 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <img
                src="https://picsum.photos/seed/prod4/300/200"
                alt="产品图片"
                class="w-full h-40 object-cover"
              />
              <div class="p-4">
                <h3 class="font-bold text-gray-800 mb-2">产品 4</h3>
                <p class="text-gray-600 text-sm mb-3">
                  这是一个示例产品，展示了如何在滚动组件中使用自定义内容。
                </p>
                <button
                  class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition-colors duration-300"
                >
                  查看详情
                </button>
              </div>
            </div>

            <div
              class="w-64 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
            >
              <img
                src="https://picsum.photos/seed/prod5/300/200"
                alt="产品图片"
                class="w-full h-40 object-cover"
              />
              <div class="p-4">
                <h3 class="font-bold text-gray-800 mb-2">产品 5</h3>
                <p class="text-gray-600 text-sm mb-3">
                  这是一个示例产品，展示了如何在滚动组件中使用自定义内容。
                </p>
                <button
                  class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition-colors duration-300"
                >
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </template>
      </ScrollWithButtons>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';

// 基础横向滚动容器组件
const BaseScrollContainer = {
  props: {
    scrollbarHidden: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { slots }) {
    const containerRef = ref(null);
    let isDragging = false;
    let startX;
    let scrollLeft;

    const handleMouseDown = (e) => {
      isDragging = true;
      containerRef.value.classList.add('cursor-grabbing');
      startX = e.pageX - containerRef.value.offsetLeft;
      scrollLeft = containerRef.value.scrollLeft;
    };

    const handleMouseLeave = () => {
      isDragging = false;
      containerRef.value.classList.remove('cursor-grabbing');
    };

    const handleMouseUp = () => {
      isDragging = false;
      containerRef.value.classList.remove('cursor-grabbing');
    };

    const handleMouseMove = (e) => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - containerRef.value.offsetLeft;
      const walk = (x - startX) * 2; // 滚动速度
      containerRef.value.scrollLeft = scrollLeft - walk;
    };

    onMounted(() => {
      containerRef.value.addEventListener('mousedown', handleMouseDown);
      containerRef.value.addEventListener('mouseleave', handleMouseLeave);
      containerRef.value.addEventListener('mouseup', handleMouseUp);
      containerRef.value.addEventListener('mousemove', handleMouseMove);
    });

    onUnmounted(() => {
      containerRef.value.removeEventListener('mousedown', handleMouseDown);
      containerRef.value.removeEventListener('mouseleave', handleMouseLeave);
      containerRef.value.removeEventListener('mouseup', handleMouseUp);
      containerRef.value.removeEventListener('mousemove', handleMouseMove);
    });

    return {
      containerRef,
    };
  },
  template: `
    <div 
      ref="containerRef" 
      class="relative overflow-x-auto pb-4 mb-2 cursor-grab"
      :class="scrollbarHidden ? 'scrollbar-hide' : ''"
    >
      <div class="flex space-x-4 min-w-max py-2">
        <slot name="content" />
      </div>
    </div>
  `,
};

// 带导航按钮的横向滚动组件
const ScrollWithButtons = {
  props: {
    scrollAmount: {
      type: Number,
      default: 200,
    },
  },
  setup(props, { slots }) {
    const containerRef = ref(null);
    const scrollContainerRef = ref(null);

    const scrollLeft = () => {
      scrollContainerRef.value.scrollBy({
        left: -props.scrollAmount,
        behavior: 'smooth',
      });
    };

    const scrollRight = () => {
      scrollContainerRef.value.scrollBy({
        left: props.scrollAmount,
        behavior: 'smooth',
      });
    };

    const showLeftButton = computed(() => {
      return scrollContainerRef.value && scrollContainerRef.value.scrollLeft > 10;
    });

    const showRightButton = computed(() => {
      return (
        scrollContainerRef.value &&
        scrollContainerRef.value.scrollLeft + scrollContainerRef.value.clientWidth <
          scrollContainerRef.value.scrollWidth - 10
      );
    });

    return {
      containerRef,
      scrollContainerRef,
      scrollLeft,
      scrollRight,
      showLeftButton,
      showRightButton,
    };
  },
  template: `
    <div ref="containerRef" class="relative">
      <button
        v-if="showLeftButton"
        @click="scrollLeft"
        class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white text-gray-800 w-10 h-10 rounded-full shadow-md flex items-center justify-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <i class="fa fa-chevron-left"></i>
      </button>
      
      <div ref="scrollContainerRef" class="overflow-x-auto pb-4 mb-2 mx-12">
        <div class="flex space-x-4 min-w-max py-2">
          <slot name="content" />
        </div>
      </div>
      
      <button
        v-if="showRightButton"
        @click="scrollRight"
        class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white text-gray-800 w-10 h-10 rounded-full shadow-md flex items-center justify-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  `,
};

// 自动播放的横向滚动组件
const AutoScroll = {
  props: {
    scrollSpeed: {
      type: Number,
      default: 2,
    },
    pauseOnHover: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { slots }) {
    const containerRef = ref(null);
    const scrollContainerRef = ref(null);
    const isPlaying = ref(true);
    const intervalRef = ref(null);

    const togglePlay = () => {
      isPlaying.value = !isPlaying.value;
    };

    const startAutoScroll = () => {
      intervalRef.value = setInterval(() => {
        if (isPlaying.value) {
          scrollContainerRef.value.scrollBy({
            left: props.scrollSpeed,
            behavior: 'smooth',
          });

          // 如果滚动到尽头，则回到开始位置
          if (
            scrollContainerRef.value.scrollLeft + scrollContainerRef.value.clientWidth >=
            scrollContainerRef.value.scrollWidth
          ) {
            scrollContainerRef.value.scrollTo({
              left: 0,
              behavior: 'instant',
            });
          }
        }
      }, 30);
    };

    const handleMouseEnter = () => {
      if (props.pauseOnHover) {
        isPlaying.value = false;
      }
    };

    const handleMouseLeave = () => {
      if (props.pauseOnHover) {
        isPlaying.value = true;
      }
    };

    onMounted(() => {
      startAutoScroll();

      if (props.pauseOnHover) {
        scrollContainerRef.value.addEventListener('mouseenter', handleMouseEnter);
        scrollContainerRef.value.addEventListener('mouseleave', handleMouseLeave);
      }
    });

    onUnmounted(() => {
      clearInterval(intervalRef.value);

      if (props.pauseOnHover) {
        scrollContainerRef.value.removeEventListener('mouseenter', handleMouseEnter);
        scrollContainerRef.value.removeEventListener('mouseleave', handleMouseLeave);
      }
    });

    return {
      containerRef,
      scrollContainerRef,
      isPlaying,
      togglePlay,
    };
  },
  template: `
    <div ref="containerRef" class="relative">
      <div ref="scrollContainerRef" class="overflow-x-auto pb-4 mb-2">
        <div class="flex space-x-4 min-w-max py-2">
          <slot name="content" />
        </div>
      </div>
      
      <button
        @click="togglePlay"
        class="absolute right-4 bottom-4 z-10 bg-white/80 hover:bg-white text-gray-800 w-10 h-10 rounded-full shadow-md flex items-center justify-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <i :class="isPlaying ? 'fa fa-pause' : 'fa fa-play'"></i>
      </button>
    </div>
  `,
};

// 可分页的横向滚动组件
const ScrollWithPagination = {
  props: {
    itemsPerPage: {
      type: Number,
      default: 4,
    },
  },
  setup(props, { slots }) {
    const containerRef = ref(null);
    const scrollContainerRef = ref(null);
    const currentPage = ref(0);
    let itemWidth = 0;
    let pageCount = 0;

    const calculatePageCount = () => {
      if (!scrollContainerRef.value) return;

      const items = scrollContainerRef.value.querySelector('div').children;
      if (items.length === 0) return;

      itemWidth = items[0].offsetWidth + 16; // 宽度 + 间距
      const visibleWidth = scrollContainerRef.value.clientWidth;
      const itemsPerPage = Math.max(1, Math.floor(visibleWidth / itemWidth));
      pageCount = Math.ceil(items.length / itemsPerPage);
    };

    const goToPage = (page) => {
      if (page < 0 || page >= pageCount) return;

      currentPage.value = page;
      scrollContainerRef.value.scrollTo({
        left: page * itemWidth * props.itemsPerPage,
        behavior: 'smooth',
      });
    };

    const prevPage = () => {
      goToPage(currentPage.value - 1);
    };

    const nextPage = () => {
      goToPage(currentPage.value + 1);
    };

    const getDots = () => {
      const dots = [];
      for (let i = 0; i < pageCount; i++) {
        dots.push(i);
      }
      return dots;
    };

    onMounted(() => {
      calculatePageCount();

      // 监听窗口大小变化，重新计算分页
      window.addEventListener('resize', calculatePageCount);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', calculatePageCount);
    });

    return {
      containerRef,
      scrollContainerRef,
      currentPage,
      pageCount,
      goToPage,
      prevPage,
      nextPage,
      getDots,
    };
  },
  template: `
    <div ref="containerRef" class="relative">
      <div ref="scrollContainerRef" class="overflow-x-auto pb-4 mb-6">
        <div class="flex space-x-4 min-w-max py-2">
          <slot name="content" />
        </div>
      </div>
      
      <div class="flex justify-center space-x-2 mt-4">
        <button
          @click="prevPage"
          :disabled="currentPage === 0"
          class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          上一页
        </button>
        
        <template v-for="dot in getDots()" :key="dot">
          <button
            @click="goToPage(dot)"
            :class="[
              'w-3 h-3 rounded-full transition-all duration-300',
              currentPage === dot ? 'bg-blue-500 w-8' : 'bg-gray-300'
            ]"
          ></button>
        </template>
        
        <button
          @click="nextPage"
          :disabled="currentPage >= pageCount - 1"
          class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          下一页
        </button>
      </div>
    </div>
  `,
};
</script>

<style type="text/tailwindcss">
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}
</style>

<style>
/* 基础样式 */
body {
  font-family: 'Inter', sans-serif;
}

/* 滚动动画 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}
</style>
